export default {
    methods: {

        /**
         * 添加信息窗口
         * @param title
         * @param content
         * @param type
         */
        addInfoWindow(title, content, type) {
            let info;
            switch (type) {
                case "broad":
                    info = {
                        isCustom: true, //使用自定义窗体
                        content: this.createInfoWindowForBroad(title, content),
                        offset: new AMap.Pixel(16, -45)
                    }
                    break;
                case "monitor":
                    info = {
                        isCustom: true, //使用自定义窗体
                        content: this.createInfoWindowForMonitor(title, content),
                        offset: new AMap.Pixel(16, -45)
                    }
                    break;
                default:
                    break;
            }
            return new AMap.InfoWindow(info);
        },

        /**
         * 组织黑广播信息窗口
         * @param title
         * @param content
         * @returns {HTMLDivElement}
         */
        createInfoWindowForBroad(title, content) {
            let info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";
            //可以通过下面的方式修改自定义窗体的宽高
            //info.style.width = "400px";
            // 定义顶部标题
            let top = document.createElement("div");
            let titleD = document.createElement("div");
            let closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = this.closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            let middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'rgb(0,0,0,0.5)';
            let rowInfo = document.createElement("div")
            rowInfo.innerHTML = `<span style="color: #ffffff">地址:${content.address}</span><br/>`
            middle.appendChild(rowInfo)
            for (let i = 0; i < content.data.length; i++) {
                let rowInfo = document.createElement("div")
                rowInfo.innerHTML = `<span style="color: #ffffff">频点:${content.data[i].freq} 类型:${content.data[i].category} 时间:${content.data[i].time}</span><br/>`
                middle.appendChild(rowInfo)
            }
            info.appendChild(middle);

            // 定义底部内容
            let bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            let sharp = document.createElement("img");
            sharp.src = "https://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
        },

        /**
         * 组织监测人员信息窗口
         * @param title
         * @param content
         * @returns {HTMLDivElement}
         */
        createInfoWindowForMonitor(title, content) {
            let info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";
            //可以通过下面的方式修改自定义窗体的宽高
            //info.style.width = "400px";
            // 定义顶部标题
            let top = document.createElement("div");
            let titleD = document.createElement("div");
            let closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = this.closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            let middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'rgb(0,0,0,0.5)';
            // for (let i = 0; i < content.length; i++) {
            let addressInfo = document.createElement("div");
            addressInfo.innerHTML = `<span style="color: #ffffff">地址:${content.address}</span><br/>`;
            middle.appendChild(addressInfo);
            let rowInfo = document.createElement("div");
            rowInfo.innerHTML = `<span style="color: #ffffff">姓名:${content.monitor} 手机号:${content.phonenumber}</span><br/>`
            middle.appendChild(rowInfo)
            // }
            info.appendChild(middle);

            // 定义底部内容
            let bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            let sharp = document.createElement("img");
            sharp.src = "https://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
        },

        /**
         * 关闭信息窗口
         */
        closeInfoWindow() {
            this.map.clearInfoWindow();
        },
    }
}